<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: yangyaru
  Date: 2022/4/13
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>某某国际物流有限公司</title>
    <!-- 网页的图标 -->
    <link rel="icon" href="image/favicon.ico">
    <!--CSS-->
    <style>
        /*头部样式开始*/
        *{
            margin: 0;
            padding: 0;
        }

        .header{
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: white;
            font-size: 12px;
            font-family: 微软雅黑;
            color: #666666;
        }
        .wrap{
            width: 1200px;
            margin: auto;
        }
        .header-left{
            float: left;
        }
        .header-right{
            float: right;
        }
        .header li{
            float: left;
            list-style: none;
        }
        .header a{
            color: #666666;
            text-decoration: none;
        }
        .header span{
            color: #D9D9D9;
            margin: 0 3px;
        }
        /*头部样式结束*/
        /*导航样式开始*/
        .nav{
            width: 100%;
            height: 100px;
            background-color: white;
        }

        .logo{
            width: 50px;
            height: 50px;
            float: left;
            margin-top: 25px;
        }

        .brand{
            width: 200px;
            height: 50px;
            float: left;
            margin-top: 32px;
        }

        .nav-bar{
            width: 950px;
            height: 100px;
            float: left;
            padding-left: 200px;
            box-sizing: border-box;
        }

        .logo img{
            width: 50px;
        }

        .brand>ul>li{
            font-family: 宋体;
            list-style: none;
            text-align: center;
        }

        .nav-bar>ul>li{
            float: left;
            list-style: none;
            padding: 35px 20px;
            font-family: 宋体;
        }

        .nav-bar a{
            color: black;
            text-decoration: none;
        }

        .nav-bar>ul>li>a:hover{
            color: rgb(193, 38, 40);
        }
        /*导航样式结束*/
        .demo01{
            width: 100%;
            height: 250px
        }

        .demo02{
            width: 100%;
            height: 60px
        }

        .day2>ul>li>a:hover{
            background-color: rgb(193, 38, 40);

        }

        .demo03{
            width: 100%;
            height: 280px;
        }
        .demo04{
            width: 100%;
            height: 450px;
        }

        #container {
            margin-left: 10%;
            margin-bottom: 50px;
            width: 80%;
            height: 400px;
        }

        .demo05{
            width: 100%;
            height: 250px;
        }

        .demo06{
            width: 100%;
            height: 30px;
            background-color: #1A1A1A;
        }
    </style>
</head>
<body>
<!--头部开始-->
<div class="header">
    <div class="wrap">
        <ul class="header-left">
            <li>欢迎来到某某国际物流公司!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">登录</a><span>|</span></li>
            <li><a href="#">注册</a></li>
        </ul>
        <ul class="header-right">
            <li><img src="image/psdy.png" width="18px">24小时热线:400-1234-XXXX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">设为首页</a><span>|</span></li>
            <li><a href="#">加入收藏</a></li>
        </ul>
    </div>
</div>
<!--头部结束-->
<!--导航开始-->
<div class="nav">
    <div class="wrap">
        <div class="logo">
            <img src="image/5ay2.png">
        </div>
        <div class="brand">
            <ul>
                <li>某某国际物流有限公司</li>
                <li style="font-size: 10px;">MARINE LOGISTICS CO LTD</li>
            </ul>
        </div>
        <div class="nav-bar">
            <ul>
                <li><a href="/page1">首页</a></li>
                <li><a href="/page2">关于我们</a></li>
                <li><a href="/page3">业务范围</a></li>
                <li><a href="/page6">新闻中心</a></li>
                <li><a href="/page8">网上下单</a></li>
                <li><a href="/page11">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>
<!--导航结束-->
<div class="demo01" style="background-image: url(/image/map-background.jpeg)"></div>
<div class="demo02" style="background: rgba(249,249,249,0.5);">
    <div class="day1" style="float: left;width: 35%;height: 60px">
        <a href="/page1" style="font-family: 微软雅黑;font-size: 13px;color: black;text-decoration: none;display: block;padding-top: 20px;padding-left: 100px;float: left">首页</a>
        <p style="font-family: 微软雅黑;font-size: 13px;color: black;float: left;padding-top: 20px">&nbsp;>>&nbsp;联系我们</p>
    </div>
    <div class="day2" style="float: left;width: 65%;height: 60px;">
        <ul>
            <c:forEach begin="0" end="${businessClasses.size()-1}" var="i">

                <li style="float: left;list-style: none;margin-left: 30px;"><a href="/page3?businessClassId=${businessClasses[i].id}" style="display:block;width:120px;height:60px;text-decoration: none;color: #100f0f;font-family: 微软雅黑"><span style="position:relative;top: 18px;left: 18px;">${businessClasses[i].name}</span></a></li>

            </c:forEach>
        </ul>

    </div>
</div>

<div class="demo03">
    <p style="text-align: center;font-size: 25px;font-family: 微软雅黑;color: black;line-height: 200%;padding-top: 20px">某某国际物流有限公司</p>
    <p style="text-align: center;font-size: 15px;font-family: 微软雅黑;color: black;line-height: 200%;padding-top: 20px">咨询热线：400-000-xxxx/(21)-12345678xxx</p>
    <p style="text-align: center;font-size: 15px;font-family: 微软雅黑;color: black;line-height: 200%">公司邮箱：123456789xxxx@gmail.com</p>
    <p style="text-align: center;font-size: 15px;font-family: 微软雅黑;color: black;line-height: 200%">总部地址：中国上海市xxx区xxx路12号moumou大厦5层6xx室</p>
    <p style="text-align: center;font-size: 15px;font-family: 微软雅黑;color: black;line-height: 200%">负责人：陈先生</p>
    <p style="text-align: center;font-size: 15px;font-family: 微软雅黑;color: black;line-height: 200%">手机：123456789</p>
</div>

<div class="demo04">
    <div id="container">
        <!--设置容器-->
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=ODw5ECTMOrvPUPUTNXVgtMZ0lLp90CVI">
        </script>
        <!--引用百度地图API文件-->
        <script type="text/javascript">
            var map = new BMapGL.Map('container');
            var point = new BMapGL.Point(116.404, 39.925);
            map.centerAndZoom(point, 15);
            var opts = {
                width: 200,
                height: 100,
                title: '故宫博物院'
            };
            var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区景山前街4号', opts);
            map.openInfoWindow(infoWindow, point);
            function getInfoContent() {
                alert(infoWindow.getContent());
            }
        </script>
    </div>
</div>

<div class="demo05">

    <div class="day16" style="float: left;height: 250px; width: 43%;background-color: #222222;">
        <p style="font-family: 微软雅黑;font-size: 20px;color: white;text-align: center;line-height: 200%;padding-top: 35px">某某国际物流有限公司</p>
        <p style="text-align: center;font-size: 12px;font-family: 微软雅黑;color: white">MARINE LOGISTICS CO LTD</p>
        <input class="search1" style="width: 250px; height: 40px;margin-top: 20px;margin-left: 180px;" type="text" value="请输入关键字">
        <button class="search2" style="width: 70px; height: 40px; background-color: red;color: white;font-family: 微软雅黑;">搜索</button>
        <p style="text-align: center;line-height: 200%;color: white;font-family: 微软雅黑;font-size: 10px;padding-top: 20px;padding-left: 50px;padding-right: 50px">某某国际物流有限公司是集代理、物流配送、航空速递、公路运输、铁路运输、仓储、城际配送于一体，跨区域、网络化、信息化、智能化、具有供应链管理能力的综合性物流公司</p>
    </div>

    <div class="day17" style="float: left;height: 250px; width: 30%;background-color: #222222">
        <p style="font-size: 13px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%;padding-top: 40px">联系方式</p>
        <p style="font-size: 20px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%">021-123456X</p>
        <p style="font-size: 13px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%">地址：上海市某某区某某路某某大厦x楼x号</p>
        <p style="font-size: 13px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%">邮箱：xxxxxx@126.com</p>
        <p style="font-size: 13px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%">手机123 xxxx xxxx</p>
        <p style="font-size: 13px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%">网址：www.xxxxxxxxx.com</p>
    </div>

    <div class="day18" style="float: left;height: 250px; width: 27%;background-color: #222222">
        <p style="font-size: 15px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%;padding-top: 40px;padding-right: 25px;">微信官方公众平台</p>
        <img style="width: 130px;height: 130px;padding-left: 135px;padding-top: 10px" src="image/5z08.jpeg">
    </div>
</div>

<div class="demo06">
    <p style="text-align: center;font-size: 12px;font-family: 微软雅黑;color: white;padding-top: 8px;">Copyright 20xx www.xxxxxxx.com All Right Reserved 版权所有 某某国际物流有限公司 网站备案：ICP备123456789XXX号</p>
</div>


</body>
</html>
